<template>
	<div class="focus-edit">
		<!-- 添加菜单 -->
		<div class="button-card">
			<el-button type="primary" size="default" @click="addFocus">添加广告</el-button>
		</div>

		<!-- 瓷片区的内容 -->
		<div class="info_form" ref="infoItem">
			<el-card class="box-card" v-for="(item, index) in state.data" :key="index" shadow="never" :class="[item.anim ? 'edit_anim' : '']">
				<template #header>
					<div class="card-header">
						<span>广告 {{ index + 1 }}</span>
						<el-button class="button" type="danger" size="small" @click="deleteItem(index)">删除</el-button>
					</div>
				</template>
				<el-form :model="state.data[index]" label-width="90px">
					<el-form-item label="图片：">
						<Upload :fileUrl="state.data[index].imgUrl" :index="index" @handleAvatarSuccess="handleAvatarSuccess" />
						<span v-if="state.data.length !== 3" style="color: #ccc; font-size: 12px">建议宽高比为 3：2 (宽 180, 高 120)</span>
						<span v-else style="color: #ccc; font-size: 12px">
							<span v-if="index === 0" style="color: #ccc; font-size: 12px">建议宽高比为 16：9 (宽 144, 高 256)</span>
							<span v-else style="color: #ccc; font-size: 12px">建议宽高为 (宽 144, 高 256)</span>
						</span>
					</el-form-item>
				</el-form>
			</el-card>
		</div>

		<el-button v-show="state.data.length > 0" class="button" size="default" @click="submit">
			<el-icon class="el-icon--right"> <ArrowLeft /> </el-icon>生成预览</el-button
		>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus';
import Upload from '/@/components/upload/index.vue';
import { scorllBottom } from '/@/utils/utils.ts';

const props = defineProps({
	data: {
		type: Object,
		default: () => {},
	},
});
const infoItem = ref();
const state = reactive({
	data: [],
});

// 用于判断 data 是否有数据并且是什么数据类型
function judgment() {
	if (props.data.data instanceof Array) {
		state.data = JSON.parse(JSON.stringify(props.data.data));
	} else {
		if (props.data.type === 'focusAdvertising') {
			if (props.data.data) {
				state.data = JSON.stringify(props.data.data) === '{}' ? [] : JSON.parse(JSON.stringify(props.data.data.list));
			} else {
				state.data = JSON.stringify(props.data) === '{}' ? [] : JSON.parse(JSON.stringify(props.data.list));
			}
		}
	}
}

watch(
	() => props.data,
	(val) => {
		judgment();
	}
);
onBeforeMount(() => {
	judgment();
});

// 添加瓷片
const addFocus = () => {
	if (state.data.length < 4) {
		state.data.push({
			anim: true,
		});

		scorllBottom(infoItem.value);
	} else if (state.data.length >= 4) {
		ElMessage({
			message: '高光区最多四个广告内容。',
			type: 'warning',
		});
	}
};

const deleteItem = (cur: number) => {
	state.data.splice(cur, 1);
};

const emit = defineEmits(['submit']);

const submit = () => {
	if (state.data.length < 2) {
		ElMessage({
			message: '广告区最少需要两个广告内容。',
			type: 'warning',
		});
	} else {
		emit('submit', {
			type: 'focusAdvertising',
			list: state.data,
			index: props.data.index,
		});
	}
};

const handleAvatarSuccess = (data) => {
	// console.log(data)
	const { url, index } = data;
	state.data[index].imgUrl = url;
};
</script>

<style lang="scss" scoped>
.info_form {
	width: 100%;
	height: 60vh;
	overflow: auto;
}

.focus-edit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	// background-color: #fff;

	.button-card {
		width: 100%;
		margin-bottom: 21px;
	}

	.box-card {
		width: 100%;
		margin-bottom: 21px;

		.card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.avatar-uploader {
			width: 60px;
			height: 60px;
			border: 1px dashed #dcdfe6;

			.avatar-uploader-icon {
				width: 60px;
				height: 60px;
			}
		}
	}
}
</style>
